<template>
  <div :class="$style.container">
    <div :class="$style.content">
      <div :class="$style.left">
        <ul>
          <nuxt-link
            v-for="(item,idx) in items"
            :to="{path: item.url}"
            :key="'item'+idx"
            tag="li">{{ item.name }}</nuxt-link>
        </ul>
        <p :class="$style.desc">© 2018 film.ishareu.cn  豫ICP备17017964号</p>
      </div>
      <div :class="$style.right">
        <i
          :class="['iconfont','icon-weixin',$style.weChat]"
          @mouseover="mouseover"
          @mouseleave="mouseleave"/>
        <p :class="$style.h5">h5页面入口</p>
      </div>
      <div :class="isHover ? [$style.qrcode,$style.show]:$style.qrcode">
        <img src="./imgs/wechat.png">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          url: '#',
          name: '企业合作'
        },
        {
          url: '#',
          name: '人才招聘'
        },
        {
          url: '#',
          name: '联系我们'
        },
        {
          url: '#',
          name: '帮助中心'
        },
        {
          url: '#',
          name: '意见反馈'
        },
        {
          url: '#',
          name: '友情链接'
        },
        {
          url: '#',
          name: '学习实践'
        }
      ],
      isHover: false
    }
  },
  methods: {
    mouseover() {
      this.isHover = true
    },
    mouseleave() {
      this.isHover = false
    }
  }
}
</script>

<style lang='scss' module>
.container {
  margin-top: 50px;
  background: #f8fafc;
  padding: 36px 0px;
  height: 60px;
  box-shadow: 1px 1px 3px #c0c4cc;
  .content {
    position: relative;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 1200px;
    .left {
      width: calc(100% - 142px);
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        li {
          margin: 0px 10px;
          color: #99a1a6;
          cursor: pointer;
          font-size: 14px;
          line-height: 28px;
        }
      }
      .desc {
        padding: 0px;
        padding-left: 10px;
        color: #93999f;
        font-size: 14px;
        margin: 15px 0 0;
      }
    }
    .right {
      width: 142px;
      text-align: center;
      .weChat {
        font-size: 30px;
        cursor: pointer;
        color: #35b22b;
      }
      .h5 {
        font-size: 12px;
        color: #4d555d;
        line-height: 24px;
        margin-top: 4px;
      }
    }
    .qrcode {
      display: none;
      position: absolute;
      top: -90px;
      right: 30px;
      width: 80px;
      height: 80px;
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
    .show {
      display: block;
    }
  }
}
</style>
